import React, { useState ,useEffect, useRef } from 'react'
import { Form, Input, Button, Switch, Select, message, Upload, Image } from 'antd'
import { fetchCateLists, updateCate, fetchCateDetail } from '@a/cateLists'
import { useNavigate } from 'react-router-dom'
import { getToken } from '@u'
import PropTypes from 'prop-types'
function CateUpdate(props) {
  const formInstance = useRef();
  const navigate = useNavigate();
  const [icon, setIcon] = useState('');
  const onUploadChange = (info) => {
    // 上传图片状态发生改变触发
    // 上传完成状态中拿到 上传成功返回地址
    if (info.file.status === 'done') {
      setIcon(info.file.response.data.url)
    }
  }
  const [pCates, setCates] = useState([])
  // 请求所有分类 作为 新增分类父级分类
  const getCateLists = () => {
    fetchCateLists().then(res => {
      if(res.data.code === 200) {
        // 数据映射
        const cates = res.data.data.lists.map(cate => {
          return {
            label: cate.cateName,
            value: cate.id
          }
        });
        setCates([
          {
            label: '顶层分类',
            value: -1
          },
          ...cates
        ])
      }
    })
  }


  // 点击新增商品分类
  const submitForm = (params) => {
    params = {
      ...params,
      icon,
      enable: params.enable?1:0
    }
    updateCate(params).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          // 刷新页面
          navigate(0)
        })
      }
    })
  }
  useEffect(() => {
    getCateLists()
  }, [])
  // 当前每一次传递不用的 商品分类id 根据商品分类id 获取商品分类详情
  const [cate, setCate] = useState({});
  // 获取商品分类详情
  const getCateDetail = () => {
    fetchCateDetail({
      cateId: props.cateId
    }).then(res => {
      if (res.data.code === 200) {
        setCate(res.data.data)
        setIcon(res.data.data.icon)
        // 设置表单的字段的值
        formInstance.current.setFieldsValue(res.data.data)
      }
    })
  }
  useEffect(() => {
    getCateDetail()
  }, [props.cateId])
  return (
    <div>
      <Form
        ref={formInstance}
        name="basic"
        labelCol={{
          span: 6,
        }}
        wrapperCol={{
          span: 18,
        }}
        initialValues={
          cate
        }
        onFinish={submitForm}
        autoComplete="off"
      >
        <Form.Item
          label="商品分类名称"
          name="cateName"
          rules={[
            {
              required: true,
              message: '商品名称必须添加!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="是否启用"
          name="enable"
          valuePropName="checked"
        >
          <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked/>
        </Form.Item>
        <Form.Item
          label="分类图标"
          name="icon"

        >
          <Upload
            name="file"
            action="/api/upload"
            headers={
              {
                token: getToken()
              }
            }
            onChange = {
              onUploadChange
            }
          >
              <Button>点击上传</Button>
          </Upload>
            <Image src={icon} width={100}/>
        </Form.Item>
        <Form.Item
          label="父级分类"
          name="pid"
        >
          <Select
            style={{ width: 120 }}
            options={pCates}
          />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确定
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

CateUpdate.propTypes = {
  cateId: PropTypes.number.isRequired
}
export default CateUpdate